<template>
  <Form :model="formState" ref="formRef" v-bind="formItemLayout" class="md:flex">
    <Col :span="15">
      <FormItem name="dbIp" label="数据库IP">
        <div class="md:mx-10">
          <Input v-model:value="formState.dbIp"> </Input>
        </div>
      </FormItem>
    </Col>
    <Col class="md:mx-5" :span="7">
      <FormItem>
        <Button type="primary" @click="onSubmit">查询</Button>
        <Button style="margin-left: 10px" @click="resetForm">重置</Button>
      </FormItem>
    </Col>
  </Form>
  <div class="absolute top-20 right-15"></div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue';
import { Button, Col, Form, FormItem, Input } from 'ant-design-vue';

const emit = defineEmits(['form']);
const formRef = ref();
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 24 },
};
const formState = reactive<Record<string, any>>({});

const resetForm = () => {
  formRef.value.resetFields();
  formState.namespace = [];
};
const onSubmit = async () => {
  let params;
  formRef.value.validate().then(() => {
    params = toRaw(formState);
    emit('form', params);
  });
};
</script>
